<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/index.css">
</head>

<body>
    <!-- 登录模块 -->
    <section class="top-1">
        <div class="box">
            <input type="text" id="one" placeholder="手机号">
            <!-- 显示隐藏密码 -->
            <img src="img/yin.png" alt="" class="eye">
            <input type="password" id="two" placeholder="密码">
        </div>
        <!-- 位数要求 -->
        <p class="mess">请输入6~16位密码</p>
        <img src="img/shouji.png" alt="" class="img-1">
        <img src="img/yanzheng.png" alt="" class="img-2">
        <button class="button-2">登录</button>
    </section>
    <!-- 登录方式模块 -->
    <footer class="footer">
        <p>其他登录方式</p>
        <img src="img/wei.png" alt="">
    </footer>
    <script src="JS/flexible.js"></script>
    <script src="JS/jquery.3.5.1.js"></script>
    <script src="JS/axios.min.js"></script>
    <script>
        // 获取元素
        var eye = document.querySelector('.eye')
        var ipt = document.querySelector('#two')
        var mess = document.querySelector('.mess')
        // 密码显示隐藏
        var flag = 0;
        eye.onclick = function () {
            // 点击一次之后，flag一定要变化
            if (flag == 0) {
                ipt.type = 'text'
                eye.src = "img/xian.png"
                flag = 1 //赋值操作
            } else {
                ipt.type = "password"
                eye.src = "img/yin.png"
                flag = 0
            }
        }
        // 密码位数要求

        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                mess.className = 'mess wrong'
                mess.innerHTML = '您输入的位数不对要求6~16位'
            } else {
                mess.className = 'mess rong'
                mess.innerHTML = '您输入的位数对'
            }
        }
        // 登录跳转
        $(".button-2").click(function () {
            $.ajax({
                type: 'GET',
                url: 'JSON/1.json',
                dataType: 'json',
                success: (data) => {
                    if (data.useName == $('#one').val() && data.passWord == $("#two").val()) {
                        console.log("登录成功");
                        location.href = "HTML/proving.html"
                    } else {
                        alert("登录失败:账号或密码错误。请重新输入！")
                        // console.log("登录失败");
                    }
                },
                err: (err) => {
                    console.log("获取失败");
                }
            })
        })
    </script>
</body>

</html>